<template>
	<view>
		<view class="bg">
		</view>
		<view class="wrapper">
			<view class="middle">
				<view class="information">
					<view class="title">
						余额 (元)
					</view>
					<view class="money">
						{{money}}
					</view>
					<view class="btn" @click="toRecharge">
						<button>充值</button>
					</view>
				</view>
				<view class="right" @click="toRecord">
					充值记录
					<view class="arrow">
						<image src="../../../../static/image/you-9@2x.png" mode=""></image>
					</view>
				</view>
				<view class="logo">
					<image src="../../../../static/image/yue-3@2x.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money:0
			}
		},
		onShow() {
			this.money=uni.getStorageSync("userInfo").money
		},
		created() {
			this.money=uni.getStorageSync("userInfo").money
		},
		methods: {
			toRecord(){
				uni.navigateTo({
					url:"/pages/mime/children/rechargeRecord/rechargeRecord"
				})
			},
			toRecharge(){
				uni.navigateTo({
					url:"/pages/mime/children/recharge/recharge"
				})
			}
		}
	}
</script>

<style scoped>
.bg{
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}
.wrapper{
	padding: 30rpx;
}
.middle{
	height: 300rpx;
	background: linear-gradient(90deg, #F2BB10 1%, #F7CC46 100%);
	box-shadow: 0px 6rpx 20rpx 0rpx rgba(244, 195, 39, 0.3);
	border-radius: 10rpx;
	position: relative;
}
.information{
	padding: 40rpx;
	padding-bottom: 20rpx;
}
.right{
	position: absolute;
	right: 10%;
	bottom: 10%;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	z-index: 9;
}
.right .arrow{
	position: absolute;
	right: -25%;
	top: 5%;
}
.right .arrow image{
	width: 14rpx;
	height: 25rpx;
}
.logo{
	position: absolute;
	right: 0;
	top: 0;
}
.logo image{
	width: 286rpx;
	height: 299rpx;
}
.middle .title{
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}
.middle .money{
	font-size: 60rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: #FFFFFF;
	margin: 15rpx 0;
}
.btn{
	width: 242rpx;
	height: 82rpx;
	margin-left: 10rpx;
}
.btn button{
	width: 100%;
	height: 100%;
	background: #F7CC46;
	border: 2rpx solid #FFFFFF;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
</style>
